<template>
  <div class="shopIndex">
    <section class="logo isCenter">
      <img class="logoImg" :src="logoInfo.substationLogo || initLogo" alt="logo">
      <p class="logoText">
        <strong>{{ logoInfo.substationName || '求礼品' }}</strong>
        <br>
        <span>{{ logoInfo.domainName || 'qiulipin.com' }}</span>
      </p>
    </section>
    <section class="banner">
      <el-carousel :height="`${bannerHeight}px`" arrow="never">
        <el-carousel-item v-for="(item, index) in bannerArr" class="bannerImgBox" :key="index">
          <div class="bannerImgBox">
            <img :src="item.imgUrl" @click="bannerLink(item.route)" alt="轮播图">
          </div>
          <!-- <b class="button" @click="$router.push({name: 'ordersNow'})">立即采购</b> -->
        </el-carousel-item>
      </el-carousel>
    </section>
    <section class="showBox">
      <div class="boxWrap isCenter">
        <div class="topTitleImg">
          <img @click="clickImg" v-for="(item, index) in titleImgArr" :key="index" :src="item" alt="img">
        </div>
        <div class="showGoodsBox" v-for="(item, index) in goodsArr" :key="index">
          <div class="titles" :class="{'redTitle': index == 1}">
            <strong>{{ item.titleName }}</strong>
            <span>{{ item.infoTitle }}</span>
          </div>
          <ul class="goodsBox">
            <li @click="clickImg" v-for="(m, i) in item.productArr" :key="i">
              <img :src="m.url" alt="img">
              <p :title="m.info">{{ m.info }}</p>
              <strong>￥{{ m.price }}</strong>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <section class="footer">
      <div v-for="(item, index) in footerArr" :key="index">
        <img :src="item.imgUrl" alt="img">
        <span>{{ item.info }}</span>
      </div>
    </section>
    <section class="others">
      <i class="govIcon"></i>
      <span @click="links(item.link)" v-for="(item, index) in copyrightArr" :key="index" :class="{'link': item.link}">{{ item.title }}</span>
    </section>
    <!-- <HelpBase fixed></HelpBase> -->
  </div>
</template>
<script type="text/ecmascript-6">
import HelpBase from '@/components/base/helpBase/helpBase'
import { mapGetters } from 'vuex'
export default {
  name: 'shopIndex',
  components: {
    HelpBase
  },
  data () {
    return {
      bannerHeight: 500,
      initLogo: require('@/assets/images/logo.png'),
      bannerArr: [
        {
          imgUrl: require('@/assets/images/GroupLong.png'),
          route: 'ordersNow'
        }
      ],
      titleImgArr: [
        require('@/assets/images/goods/Rectangle 18 Copy 3.png'),
        require('@/assets/images/goods/Mask.png'),
        require('@/assets/images/goods/Rectangle 18 Copy 5.png'),
        require('@/assets/images/goods/Rectangle 18 Copy 6.png')
      ],
      goodsArr: [
        {
          titleName: '品牌精选',
          infoTitle: '品质好，实用度高',
          productArr: [
            {
              url: require('@/assets/images/goods/纸巾副本.png'),
              info: '【正品】清风抽纸原木餐巾纸家庭装纸巾200抽',
              price: '2.10'
            },
            {
              url: require('@/assets/images/goods/500g洗衣液副本.png'),
              info: '正品众秀洗衣液，熏香薰衣草浓缩洗衣液500g装',
              price: '0.65'
            },
            {
              url: require('@/assets/images/goods/纸巾111.png'),
              info: '原木纸巾，家居抽取式面巾纸吸水不易破,80抽[1包]',
              price: '0.90'
            },
            {
              url: require('@/assets/images/goods/夹子111.jpeg'),
              info: '木质夹子，多用途固定夹[1个]',
              price: '0.10'
            },
            {
              url: require('@/assets/images/goods/衣架.jpeg'),
              info: '旅行折叠衣架简易便携 颜色随机[1个]',
              price: '0.80'
            }
          ]
        },
        {
          titleName: '新品筹备',
          infoTitle: '特例独行，小资必备',
          productArr: [
            {
              url: require('@/assets/images/goods/Rectangle 138.png'),
              info: '泥塑北欧风小摆件',
              price: '5'
            },
            {
              url: require('@/assets/images/goods/Rectangle 137.png'),
              info: '超静音大风量手持风扇（充电款）',
              price: '18.8'
            },
            {
              url: require('@/assets/images/goods/Rectangle 136.png'),
              info: '高档磨砂漱口杯水杯子',
              price: '1.5'
            },
            {
              url: require('@/assets/images/goods/Rectangle 135.png'),
              info: '日风礼品碗套装礼盒装餐具小碗',
              price: '8.9'
            },
            {
              url: require('@/assets/images/goods/21535335967_.pic_hd.png'),
              info: '正广和盐汽水碳酸饮料',
              price: '1.8'
            }
          ]
        }
      ],
      footerArr: [
        {
          imgUrl: require('@/assets/images/goods/安全保障.png'),
          info: '丢件/破损包赔'
        },
        {
          imgUrl: require('@/assets/images/goods/物流图标.png'),
          info: '圆通快递鼎力支持  '
        },
        {
          imgUrl: require('@/assets/images/goods/客服-fill.png'),
          info: '专属客服贴心服务'
        }
      ],
      copyrightArr: [
        {
          title: '浙ICP备18029136号',
          link: 'http://www.miitbeian.gov.cn'
        },
        {
          title: 'All Rights Reserved'
          // link: ''
        }
      ]
    }
  },
  computed: {
    isLogin: {
      get: function () {
        if (this.userInfo.userName) {
          return true
        } else {
          return false
        }
      },
      set: function (val) {
        return val
      }
    },
    ...mapGetters([
      'userInfo',
      'logoInfo'
    ])
  },
  methods: {
    links (linkUrl) {
      if (linkUrl) {
        window.open(linkUrl)
      }
    },
    clickImg () {
      if (this.isLogin) {
        this.$router.push({ name: 'giftStore' })
      } else {
        this.$router.push({ name: 'login' })
      }
    },
    resize () { // 轮播图高度动态设置
      let width = window.innerWidth
      this.bannerHeight = width / 2.85
      if (this.bannerHeight > 650) {
        this.$nextTick(() => {
          this.bannerHeight = 650
        })
      } else if (this.bannerHeight < 500) {
        this.$nextTick(() => {
          this.bannerHeight = 500
        })
      }
    },
    bannerLink (route) {
      this.$router.push({ name: route })
    }
  },
  mounted () {
    // this.resize()
    // window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    // window.removeEventListener('resize', this.resize)
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../assets/stylus/index.styl'
.shopIndex
  width 100%
  height 100%
  overflow auto
  .isCenter
    padding 0 100px
    max-width 1240px
    margin 0 auto
  .logo
    display flex
    align-items center
    height 100px
    .logoImg
      width 55px
      height 55px
    .logoText
      margin-left 12px
      strong
        font-size 32px
        color #444444
        letter-spacing 4px
      span
        font-size 14px
        color #888888
        letter-spacing 1px
  .banner
    position relative
    text-align center
    // overflow hidden
    .bannerImgBox
      width 100%
      height 100%
      display flex
      justify-content center
      img
        height 100%
        cursor pointer
  .showBox
    background #F4F4F4
    padding-top 12px
    padding-bottom 12px
    img
      border 1px solid #ffffff
      transition all 0.2s
      cursor pointer
      &:hover
        border 1px dashed #999999
    .topTitleImg
      background #ffffff
      padding 24px
      display flex
      justify-content space-between
      img
        width 277px
    .showGoodsBox
      margin-top 12px
      background #ffffff
      .titles
        height 55px
        line-height 55px
        padding 0 24px
        border-bottom 1px solid #F4F4F4
        cursor pointer
        strong
          position relative
          font-size 20px
          color #F76B1C
          font-weight bold
          &:before
            content ''
            position absolute
            left -12px
            top 0
            width 4px
            height 16px
            background linear-gradient(180deg, rgba(250, 217, 97, 1) 0%, rgba(247, 107, 28, 1) 100%)
        span
          font-size 14px
          color #888888
          margin-left 8px
      .redTitle
        strong
          color #FF0437
          &:before
            background linear-gradient(180deg, rgba(255, 131, 57, 1) 0%, rgba(255, 4, 55, 1) 100%)
      .goodsBox
        padding 24px
        display flex
        justify-content space-between
        cursor pointer
        li
          display flex
          flex-direction column
          width 200px
          img
            width 200px
            height 200px
          p
            font-size 14px
            line-height 20px
            height 40px
            margin 8px 0
            color #888888
            text-overflow ellipsis
            overflow hidden
            display box
            display -webkit-box
            -webkit-line-clamp 2
            -webkit-box-orient vertical
          strong
            font-size 20px
            line-height 1
            color #FF0437
            font-weight bold
  .footer
    background #F9F9F9
    height 155px
    line-height 155px
    display flex
    justify-content space-around
    box-shadow 0 -1px 2px #dedede
    >div
      img
        min-width 48px
        max-width 57px
        vertical-align middle
      span
        font-size 16px
        line-height 1
        color #444444
        margin-left 24px
  .others
    background #F9F9F9
    line-height 40px
    height 40px
    text-align center
    padding-bottom 30px
    i
      display inline-block
      width 16px
      height 16px
      vertical-align middle
      background url('../../assets/images/userCenter/16x16_beian_gov.png') no-repeat
    span
      font-size 14px
      line-height 1
      color #000
      transition all 0.1s
      display inline-block
      padding 0 12px
      border-right 1px solid #000
      &:hover
        color #ff3341
      &:last-child
        border-right 0
    .link
      cursor pointer
</style>
